<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 300px;
        height: auto;
      }
      p {
        width: 100px;
        height: 100px;
        font-size: 32px;
      }
      .box1 {
        background: red;
      }
      .box2 {
        background: skyblue;
      }
      .box3 {
        background: pink;
      }
    </style>
  </head>
  <body>
    <div class="container1">
      <button>按钮一</button>
      <button>按钮二</button>
      <button>按钮三</button>
      <p class="box1">1</p>
    </div>
    <button class="nextpage">下一页</button>
    <div class="container2">
      <button>按钮一</button>
      <button>按钮二</button>
      <button>按钮三</button>
      <p class="box1">1</p>
    </div>
    <script>
      //封装选择函数
      function $(ele) {
        return document.querySelector(ele);
      }
      function $all(ele) {
        return document.querySelectorAll(ele);
      }

      function changepage(btns, ele, page) {
        Array.from(btns).forEach(function (item, i) {
          item.onclick = function () {
            ele.className = `box${i + 1}`;
            page = i + 1;
            ele.innerText = `${page}`;
          };
        });
        // return num;
      }
      var p1Ele = $(".container1 p");
      var btns1 = $all(".container1 button");
      var page1 = 1;
      var res = changepage(btns1, p1Ele, page1);
      $(".nextpage").onclick = () => {
        page1++;
        if (page1 == 4) {
          page1 = 1;
        }
        p1Ele.className = `box${page1}`;
        p1Ele.innerText = `${page1}`;
      };

      var p2Ele = $(".container2 p");
      var btns2 = $all(".container2 button");
      var page2 = 1;
      changepage(btns2, p2Ele, page2);
      setInterval(() => {
        page2++;
        if (page2 == 4) {
          page2 = 1;
        }
        p2Ele.className = `box${page2}`;
        p2Ele.innerText = `${page2}`;
      }, 1500);
    </script>
  </body>
</html>
